import React, { Component, ComponentClass } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import {View, Textarea, Button, Picker, Text} from '@tarojs/components'
import './index.scss'
import {newHttp} from "../../utils/request";
import {
  GROUPING_PAGE,
  NOTICE_PAGE
} from "../../constants/api";
import {GetRequest} from "../../utils/tools";

type StateProps = {
  isOnlyView: boolean
  value: string
  gounpList: any
  gounpId: string | number | null
  gounpIndex: number
  gounpName: string
  noticeList: any
  noticeIndex: number
  noticeName: string
  noticeId: string | number | null
}

class productForm extends Component {
  $instance = getCurrentInstance();
  state: StateProps = {
    isOnlyView: false,
    value: '',
    gounpList: [],
    gounpId: null,
    gounpName: '',
    gounpIndex: 0,
    noticeList: [],
    noticeIndex: 0,
    noticeName: '',
    noticeId: 0
  }

  async componentDidMount() {
    let {value}: any = this.$instance.router.params;
    value = value == undefined || value == 'undefined' ? '' : decodeURIComponent(value);
    const {type} = Taro.getCurrentInstance().router.params;
    if (type && type == 'onlyView') {
      this.setState({
        isOnlyView: true
      });
    } else {
      this.setState({
        isOnlyView: false
      });
    }
    this.setState({
      value
    });
    const gounpList = await newHttp.catchGet(GROUPING_PAGE, {});
    this.setState({
      gounpList
    });
  }

  changeText({detail: {value}}) {
    this.setState({
      value
    });
  }

  async checkGounp(index) {
    const gounpId = this.state.gounpList[index].id;
    const gounpName = this.state.gounpList[index].name;
    const noticeList = await newHttp.catchGet(NOTICE_PAGE, {
      groupingId: gounpId
    });
    this.setState({
      gounpId,
      noticeList,
      gounpName
    });
  }

  checkTemplate(value) {
    if (value || value === 0) {
      this.setState({
        value: this.state.noticeList[value].content,
        noticeName: this.state.noticeList[value].title,
        noticeId: this.state.noticeList[value].id,
        noticeIndex: value,
      });
    }
  }

  save() {
    const pages = Taro.getCurrentPages();
    const prevPage = pages[pages.length - 2];
    if (process.env.TARO_ENV === 'h5') {
      prevPage.setState({
        textareaValue: this.state.value,
        textareaKey: this.$instance.router.params.key,
        index: this.$instance.router.params.index
      });
    } else {
      prevPage.setData({
        textareaValue: this.state.value,
        textareaKey: this.$instance.router.params.key,
        index: this.$instance.router.params.index
      });
    }
    Taro.navigateBack({
      delta: 1
    });
  }

  render() {
    const dataColor: any = Taro.getStorageSync('colorData');
    const {isOnlyView, value, gounpList, gounpIndex, gounpName, gounpId, noticeList, noticeIndex, noticeName, noticeId} = this.state;
    const isNotice: any = this.$instance.router.params.isNotice;
    return (
      <View className='edit'>
        {isNotice == 1 && <View style='margin-bottom: 10px;'>
          <Picker
            mode='selector'
            range={gounpList}
            rangeKey='name'
            onChange={({detail: {value}}) => this.checkGounp(value)}
            value={gounpIndex}
          >
            <View className='product-edit-block-item edit-border-bottom'>
              <View className='product-edit-block-item-left'>
                所属分组
              </View>
              <View className='product-edit-block-item-right t-a-r'>
                {!gounpId && <View className='mepty c-666'>
                  未添加
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {gounpId && <View className='value c-666'>
                  {gounpName}
                </View>}
              </View>
            </View>
          </Picker>
          <Picker
            mode='selector'
            range={noticeList}
            rangeKey='title'
            onChange={({detail: {value}}) => this.checkTemplate(value)}
            value={noticeIndex}
          >
            <View className='product-edit-block-item'>
              <View className='product-edit-block-item-left'>
                标题
              </View>
              <View className='product-edit-block-item-right t-a-r'>
                {!noticeId && <View className='mepty c-666'>
                  未添加
                  <Text className='ret'>{`>`}</Text>
                </View>}
                {noticeId && <View className='value c-666'>
                  {noticeName}
                </View>}
              </View>
            </View>
          </Picker>
        </View>
        }
        <Textarea
          disabled={isOnlyView}
          maxlength={-1}
          style='background:#fff;width:99%;height:200px;padding: 30rpx;'
          onInput={(e) => this.changeText(e)}
          value={value != 'null' && value != null ? value : ''}
          placeholder='请输入...'
          className={process.env.TARO_ENV === 'h5' ? 'h5_textarea' : ''}
        />
        {!isOnlyView && <Button onClick={() => this.save()} type='primary'
          style={`position: fixed;bottom: 0;left: 0;border-radius: 0;width: 100%; background: ${process.env.mainColor};`}
        >确定</Button>}
      </View>
    )
  }
}

export default productForm as ComponentClass;
